<template>
	<div>
		<div class="charts" id="charts" ref="charts"></div>

		<div class="charts" id="charts2" ref="charts2"></div>
	</div>
</template>

<script>
import * as echarts from "echarts";
export default {
	data() {
		return {};
	},

	mounted() {
		this.getBarData();
	},

	methods: {
		getBarData() {
			const myChart = echarts.init(this.$refs.charts);
			function getVirtualData(year) {
				const date = +echarts.time.parse(year + "-01-01");
				const end = +echarts.time.parse(+year + 1 + "-01-01");
				const dayTime = 3600 * 24 * 1000;
				const data = [];
				for (let time = date; time < end; time += dayTime) {
					data.push([echarts.time.format(time, "{yyyy}-{MM}-{dd}", false), Math.floor(Math.random() * 10000)]);
				}
				console.log(data);
				return data;
			}
			const option = {
				title: {
					top: 30,
					left: "center",
					text: "Daily Step Count",
				},
				tooltip: {},
				visualMap: {
					min: 0,
					max: 10000,
					type: "piecewise",
					orient: "horizontal",
					left: "center",
					top: 65,
				},
				calendar: {
					top: 120,
					left: 40,
					right: 30,
					cellSize: ["auto", 20],
					range: "2023",
					itemStyle: {
						borderWidth: 0.5,
					},
					yearLabel: { show: false },
					monthLabel: { show: true, position: "end" },
					dayLabel: { show: true, firstDay: "1" },
				},
				series: {
					type: "heatmap",
					coordinateSystem: "calendar",
					data: getVirtualData("2023"),
				},
			};

			myChart.setOption(option);
			window.addEventListener("resize", function () {
				myChart.resize();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.charts {
	height: 400px;
}
</style>
